<!--
 * @Description: 
 * @Author: yeeChen
 * @Date: 2023-01-04 15:16:51
 * @LastEditTime: 2023-01-04 16:05:11
 * @LastEditors: yeeChen
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
    <button id="btnGet">get</button>
    <button id="btnPost">post</button>
    <button id="btnDelete">delete</button>
    <button id="btnJsonp">jsonp</button>
</body>

<script>
    const btn = document.querySelector('#btnGet')
     $('#btnGet').on('click', function () {
            $.ajax({
                type: 'GET',
                url: 'http://127.0.0.1/api/get',
                data: { name: 'zs', age: 20 },
                success: function (res) {
                    console.log(res);
                }
            })
        })

    $('#btnPost').on('click',function(){
        $.ajax({
            type:'POST',
            url:'http://127.0.0.1/api/post',
            data:{name:'西游记',age:20},
            success:function(res){
                console.log(res);
            }
        })
    })

    $('#btnDelete').on('click',function(){
        $.ajax({
            type:'DELETE',
            url:'http://127.0.0.1/api/delete',
            success:function(res){
                console.log(res);
            }
        })
    })

    // 为jsonp按钮绑定事件
    $('#btnJsonp').on('click',function(){
        $.ajax({
            type:'GET',
            url:'http://127.0.0.1/api/jsonp',
            dataType:'jsonp',
            success:function(res){
                console.log(res);
            }
        })
    })
</script>
</html>